import React from 'react';
import { StyleSheet, Text, View, Image, TextStyle, ImageStyle, ViewStyle, Animated, Easing } from 'react-native';
import { useTranslation } from 'react-i18next';
import { px2dp, scale } from '~/utils/px2dp';

// 列表各状态：加载中、加载更多、没有数据、出错所对应的UI
type Status = 'loading' | 'empty';

interface Props {
    status: Status;
    source?: {
        title: string;
        image?: any;
    };
    style?: ViewStyle;
    titleStyle?: TextStyle;
    ImageStyle?: ImageStyle;
    refetch?: Function;
}

export default function ContentStatus({ status = 'loading', source, style, titleStyle, refetch, ImageStyle }: Props) {
    const { t } = useTranslation();
    const statusContent: { [key in Status]: any } = {
        loading: {
            title: t('ContentStatus.t1'),
            image: require('~/assets/json/loading.json'),
        },

        empty: {
            title: t('ContentStatus.t2'),
            image: { uri: 'https://bjy-dev.oss-cn-shenzhen.aliyuncs.com/xcx/images/noDevice.png' },
        },
    };
    const data = { ...statusContent[status], ...source };
    if (!status) {
        return null;
    }

    if (status === 'loading') {
        return (
            <View style={[styles.container, style]}>
                <Text>{t('ContentStatus.t1')}</Text>
            </View>
        );
    }

    return (
        <View style={[styles.container, style]}>
            <Image style={[styles.image, ImageStyle]} source={data.image} />
            <Text
                style={[styles.title, refetch && { color: '#0584FF' }, titleStyle]}
                onPress={() => {
                    Toast.show({ content: t('ContentStatus.t3'), layout: 'top' });
                    refetch && refetch();
                }}>
                {data.title}
            </Text>
        </View>
    );
}

function LoadingContent({ data, style }) {
    const startAnimation = React.useRef(false);
    const animation = React.useRef(new Animated.Value(1));

    if (!startAnimation.current) {
        const runAnimation = () => {
            animation.current.setValue(0);
            Animated.timing(animation.current, {
                toValue: 1,
                duration: 1500,
                easing: Easing.linear,
                useNativeDriver: true,
            }).start(() => runAnimation());
        };
        runAnimation();
        startAnimation.current = true;
    }

    const rotateZ = animation.current.interpolate({
        inputRange: [0, 1],
        outputRange: ['0deg', '360deg'],
    });

    return (
        <View style={[styles.listFooter, style]}>
            <Animated.Image style={[styles.loadingImage, { transform: [{ rotateZ }] }]} source={data.image} />
            <Text style={styles.loadingText}>{data.title}</Text>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        width: '100%',
        minHeight: px2dp(100),
    },
    image: {
        width: px2dp(300),
        height: px2dp(300),
        resizeMode: 'contain',
    },
    title: {
        fontSize: scale(28),
        color: '#b2b2b2',
        lineHeight: px2dp(40),
        marginTop: px2dp(10),
    },
    listFooter: {
        width: '100%',
        height: px2dp(50),
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    listFooterText: {
        fontSize: scale(13),
        color: '#b4b4b4',
    },
    loadingImage: {
        width: px2dp(20),
        height: px2dp(20),
        resizeMode: 'contain',
    },
    loadingText: {
        fontSize: scale(12),
        color: '#b2b2b2',
        marginLeft: px2dp(6),
    },
});
